
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        body{
            font-size: 14px;
        }
        .aui-nav .aui-bar-tab .active .aui-iconfont, .aui-nav .aui-bar-tab .active p{
            color:#327afa !important;
        }
        .active{
            color:#327afa !important;
        }
        .aui-tab-nav li.active {
            color: #327afa;
            border-bottom: 2px #327afa solid;
        }
        .aui-bar .aui-iconfont{
            color:#000;
        }
        footer>div{
            text-align: center;
            line-height: 55px;
            position: relative;
        }
        footer>div>div:nth-of-type(1){
            border-right: 1px solid #d9d9d9;
        }
        footer>div>div:nth-of-type(1) a{
            display: block;
            width: 100%;
            height: 100%;
            color: #000;
        }
        footer>div>div:nth-of-type(2){
            color:#327afa;
        }
        footer>div>div:nth-of-type(3){
            background: #327afa;
            color: #fff;
        }
        .moreList li {
            padding: 5px 8px;
            width: 100px;
            text-align: center;
        }
        .haderTitle li>span{
            float: left;
            display: block;
        }
        .contain .aui-tab-nav li{
            line-height: inherit;
            height: auto;
            position: relative;
            padding: 15px ;
            width: 100%;
        }
        .contain .aui-tab-nav{
            height: inherit;
            display:block;
        }
        .contents{
            margin-left: 25px;
            margin-right: 15px;
            text-align: left;
        }
        .content{
            display: inline-block;
        }
        .contents>span{
            display: block;
        }
        .time{
            display: block;
        }
        .icon{
            position: absolute;
            top:50%;
            text-align: center;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .address{
            margin-top: 8px;
        }
        .good{
            background: #fff;
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .good-pirce{
            color:#ff0005;
            font-weight: bold;
        }
        .good-info-list {
            color: #a3a3a3;
            font-size: 12px;
            line-height: 1.4;
        }
        .company-name {
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #fff;
            padding-left: 15px;
            position: relative;
        }
        .status{
            width: 100%;
            text-align: right;
            float: left;
            margin-top: 5px;
        }
        .status span{
            display: block;
            padding: 2px 12px;
            background: #d9d9d9;
        }
        .good_bottom {
            padding: 15px;
        }
        .good_bottom ul li{
            overflow: hidden;
            margin-bottom: 5px;
        }
        .good_bottom ul li span{
            display: block;
        }
        .shiji{
            font-weight: bold;
            font-size: 18px;
        }
        .good-info .aui-list-view{
            margin: 0;
        }
        .contact{
            overflow: hidden;
        }
        .contactMeg,.contactPhone{
            display: block;
            padding: 5px 30px;
            border: 1px solid #9c9c9c;
            float: left;
            width: 48%;
            margin-top: 10px;
        }
        .contactMeg{
            margin-right: 2%;
        }
        .menuRgiht{
            float: right;
            margin-right:20px;
        }
        .good_bottom{
            background: #fff;
        }
        .aui-iconfont{
            margin-right: 5px;
        }
        .total{
            margin-top: 15px;
            margin-bottom: 10px;
        }
        .total .good-pirce{
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="contain">

    <ul class="aui-tab-nav aui-border-t haderTitle">
        <li class="aui-arrow-right aui-border-b" >
            <span class="aui-iconfont aui-icon-deliver icon"></span>
            <div class="contents">
                <div class="content">已签收，签收人凭取货码签收。感谢使用圆通速递，期待再次为您服务。</div>
                <span class="time">2016-08-12  20:12:35</span>
            </div>
        </li>
        <li class="aui-arrow-right" >
            <span class="aui-iconfont aui-icon-location icon"></span>
            <div class="contents">
                <span class="name aui-pull-left">收货人：黄生</span>
                <span class="phone aui-pull-right">1871834185252</span>
                <div class="content address">收货地址：中国广东广州天河区林和西中石化大厦B塔6029 </div>
            </div>
        </li>
    </ul>
    <div class="good">
        <div class="good-info">
            <div class="company-name aui-arrow-right">
                <label class="name ">潮纺花料印刷有限公司</label>
            </div>
            <ul class="aui-list-view">
                <li class="aui-list-view-cell aui-img aui-counter-list">
                    <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                    <div class="aui-img-body">
                        <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>
                        <div class="good-info-lists">
                            <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色红色红色</div>
                            <div class=" aui-pull-left good-pirce">￥5.5</div>
                            <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                            <div class="status "><span class="aui-pull-right">已收货</span></div>
                        </div>
                    </div>
                </li>
                <li class="aui-list-view-cell aui-img aui-counter-list">
                    <img class="aui-img-object aui-pull-left" src="../image/shili.jpg">
                    <div class="aui-img-body">
                        <span class="good-name aui-ellipsis-2">这个是商品标个是商品标题这个是商标题这个是商标题这个是商品标题</span>
                        <div class="good-info-lists">
                            <div class="good-info-list aui-ellipsis-2">颜色分类：粉红色、粉红色、粉红色、粉红色、粉红色、粉红色、粉红色红色红色</div>
                            <div class=" aui-pull-left good-pirce">￥5.5</div>
                            <div class=" aui-pull-right">x<span class="good-count">12</span></div>
                            <div class="status "><span class="aui-pull-right">已收货</span></div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="good_bottom">
                <ul>
                    <li>
                        <span class="aui-pull-left">店铺优惠</span>
                        <span class="aui-pull-right">￥0.00</span>
                    </li>
                    <li>
                        <span class="aui-pull-left">货品总价</span>
                        <span class="aui-pull-right">￥83.20</span>
                    </li>
                    <li>
                        <span class="aui-pull-left">运费</span>
                        <span class="aui-pull-right">￥0.00</span>
                    </li>
                    <li>
                        <span class="aui-pull-left shiji">实付款</span>
                        <span class="aui-pull-right good-pirce">￥83.20</span>
                    </li>
                </ul>
                <div class="contact">
                    <span class="contactMeg"><i class="aui-iconfont aui-icon-message active"></i>联系卖家</span>
                    <span class="contactPhone"><i class="aui-iconfont aui-icon-phone active"></i>拨打电话</span>
                </div>
            </div>
        </div>
    </div>
    <ul class="aui-list-view">
        <li class="aui-list-view-cell" data-type="proType" tapmode onclick="">
            <a class="">
                支付方式
                <span class="menuRgiht tixianType">支付宝</span>
            </a>
        </li>
    </ul>
    <div class="good_bottom">
        <ul>
            <li>
                <span class="aui-pull-left">订单号</span>
                <span class="aui-pull-right">216402845152155</span>
            </li>
            <li>
                <span class="aui-pull-left">下单时间</span>
                <span class="aui-pull-right">2016-08-11 12:59:45</span>
            </li>
            <li>
                <span class="aui-pull-left">付款时间</span>
                <span class="aui-pull-right">2016-08-11 12:59:58</span>
            </li>
            <li>
                <span class="aui-pull-left">发货时间</span>
                <span class="aui-pull-right">2016-08-11 13:59:45</span>
            </li>
        </ul>
    </div>
    <ul class="aui-list-view total">
        <li class="aui-list-view-cell" data-type="proType" tapmode onclick="showPicker(this)">
            <a class="">
                应付款（含运费￥0.00）
                <span class="menuRgiht good-pirce">￥83.20</span>
            </a>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/sixPwd.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        var mobile = api.pageParam.mobile;
    }
    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj){
        $(obj).parent().find("li").removeClass("active");
        $(obj).addClass("active");
        var type=$(obj).attr("data-type");
        api.execScript({
            frameName:"wallet_frm",
            script:"changeContent('"+type+"')"
        })
    }


</script>
</html>
